import { Space, Tabs } from 'antd';
import React from 'react';


// import UserInfoHeader from './header';
// import Visits from './visits';
// import Other from './other';
// import LatestNotification from './latest-notification';
// import Overview from './overview';
import styles from './index.module.less';
// import './mock';
import Overview from './Overview';
import UserInfoHeader from './UserInfoHeader';

function UserInfo() {
  // const t = useLocale();


  const tabList = [
    {
      key: 'overview',
      title: "t['userInfo.tab.title.overview']",
   
      component: <Overview />,
    },
    {
      key: 'project',
      title: "t['userInfo.tab.title.project']",
    
      component: <Overview />,
    },
    {
      key: 'team',
      title: "t['userInfo.tab.title.team']",
     
      component: <Overview />,
    },
  ];

  return (
    <div className={styles.container}>
  
      <div className={styles.content}>
        <div className={styles['content-left']}>
          <Tabs>
            {tabList.map((tab) => (
              <Tabs.TabPane
                key={tab.key}
                tab={
                  <div>
                    <Space size={6}>
                 
                      <span>{tab.title}</span>
                    </Space>
                  </div>
                }
              >
                <div className={styles['tab-pane-wrapper']}>
                  {tab.component}
                </div>
              </Tabs.TabPane>
            ))}
          </Tabs>
        </div>
        <div className={styles['content-right']}>
          <Space size={12} direction="vertical">
            {/* <Visits />
            <Other /> */}
            {/* <LatestNotification /> */}
          </Space>
        </div>
      </div>
    </div>
  );
}

export default UserInfo;